﻿<!DOCTYPE html>
<html>
  <head>
    <title>My Page 3</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
      
        h1
        {
            font-size: 16px;
        }

        #map-canvas
        {
            width: 800px;
            height: 500px;
            margin: 10px auto;
        }

        div#latlng-control
        {
            background: #ffc;
            border: 1px solid #676767;
            padding: 2px 4px;
            position: absolute;
        }

        .line
        {
            padding: 3px;
        }
    </style>
    <script type="text/javascript">
        var map;
        var poly;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();

        var path = [
            { "lat": 43.00678, "lng": -89.53743 },
            { "lat": 43.00656, "lng": -89.53732 },
            { "lat": 43.005878, "lng": -89.53797 },
            { "lat": 43.005344, "lng": -89.53684 },
            { "lat": 43.003834, "lng": -89.535400 },
            { "lat": 43.003692, "lng": -89.533834 },
            { "lat": 43.006384, "lng": -89.533796 },
            { "lat": 43.0120328, "lng": -89.533667 },
            { "lat": 43.015931, "lng": -89.533635 },
            { "lat": 43.023030, "lng": -89.5335390 },
            { "lat": 43.032010, "lng": -89.533249 },
            { "lat": 43.040221, "lng": -89.5329596 },
            { "lat": 43.04632176, "lng": -89.5318224 },
            { "lat": 43.052562, "lng": -89.5277883 },
            { "lat": 43.060300, "lng": -89.52759526 },
            { "lat": 43.06401556, "lng": -89.5268978 },
            { "lat": 43.06681381, "lng": -89.5241620 },
            { "lat": 43.0714224, "lng": -89.52499888 },
            { "lat": 43.07468269, "lng": -89.52698371 },
            { "lat": 43.07490213, "lng": -89.53292749 },
            { "lat": 43.076203059, "lng": -89.53269145 },
            { "lat": 43.0765949, "lng": -89.5314576 },
            { "lat": 43.0793377, "lng": -89.53323862 },
            { "lat": 43.0803799, "lng": -89.53454754 },
            { "lat": 43.0835927, "lng": -89.5340754 },
            { "lat": 43.08458789, "lng": -89.5334853 },
            { "lat": 43.0844468, "lng": -89.53403256 },
            { "lat": 43.08445469, "lng": -89.5352985 },
            { "lat": 43.084619242, "lng": -89.5358993791 }
          ];
        var isCreateHeadPoint = true;
        var headMarker, tailMarker;
        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();

            var mapOptions = {
                center: new google.maps.LatLng(-24.363882, 130.044922),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP //ROADMAP , SATELLITE , HYBRID , TERRAIN 
            };

            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(-25.363882,131.044922),
                map: map,
                title: "My Marker"
            });

            directionsDisplay.setMap(map);

            geocoder.geocode({ 'address': '15841 NW 18 Ct, Miami, FL 33054' }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var path = poly.getPath();
                    path.push(results[0].geometry.location);
                    src_latlng = results[0].geometry.location;
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
            geocoder.geocode({ 'address': '609 E Fronie Street, Lake City, FL' }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    map.setZoom(8);

                    var path = poly.getPath();
                    path.push(results[0].geometry.location);
                    dst_latlng = results[0].geometry.location;
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });

                    calcRoute();

                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }

        function calcRoute() {

            var start = 'Miami, FL, USA';
            var end = 'Lake City, FL, USA';
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            directionsService.route(request, function (result, status) {

                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(result);
                } else {
                    alert(status);
                }
            });
        }

        function loadScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBo2Do2s1OdN5fySs1ntWTAhyoXeIuBPQE&sensor=false&callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;

    </script>
  </head>
  <body>
    <h1>Alex</h1>
    <div id="map-canvas"/>
    <h1>Rob</h1>
  </body>
</html>
